import {useRef, useState} from 'react'


// 项目的根组件
// App ->index.js ->public/index.html(root)

const framework = [
    {id: '1001', name: 'vue'},
    {id: '1002', name: 'react'},
    {id: '1003', name: 'angular'},
];

const login = false;
const loading = false;

// 多条件判断使用自定义函数

function judge(mode) {
    switch (mode) {
        case 1:
            return <span>1</span>
        case 2:
            return <span>2</span>
        default:
            return <span>3</span>
    }
}

function eventTest(name, event) {
    console.log(`${name} 点击了事件id 为 ${event.target.id}`);
}

/*
  自定义组件: 就是一个函数，可以有自己的逻辑样式，需要大写首字母，可以用 箭头函数,
 */
/*function Button(){
    return <button>Click!</button>
}*/

let Button = () => <button>Click!</button>

function App() {
    /*
        useState 只能在 react 组件内定义使用
     */

    let [count, setCount] = useState(0)
    function counter() {
        return setCount(count + 1)
    }

    let [form, setForm] = useState({name: 'jack'});

    let updateForm = () => setForm({... form, name: 'john'})

    let [value, setValue] = useState('');

    let inputRef = useRef(null);

    function showRef() {
        console.log(inputRef.current)
    }

    let name = 'this is my son';

    return (
        <div className="App">
            this is react app
            <hr/>
            <div>循环遍历</div>
            <div>渲染列表</div>
            <div>map循环哪个结构 就 return 那个结构</div>
            <div>注意事项：加上一个独一无二的key字符串或者number id</div>
            <div>key的作用：React框架内部使用提升更新性能的</div>

            <ul>
                {framework.map(item => <li key={item.id}> {item.name} </li>)}
            </ul>

            <hr/>
            <div>条件判断</div>
            {login && <span>login</span>}
            <hr/>
            {loading ? <span>loading</span> : <span>loaded</span>}
            <hr/>
            {judge(1)}

            <hr/>
            <div>事件绑定</div>
            <div>事件参数 自定义参数 跟 形参顺序一致</div>

            <button id='btn-id' onClick={(event) => eventTest('jack', event)}>Click</button>

            <hr/>
            <div>自定义组件</div>
            {<Button/>}
            {<Button></Button>}

            <hr/>
            <div>useState 计数器</div>
            <button onClick={counter}>{count}</button>

            <hr/>
            <div>useState 只替换不修改， 直接修改无法引发视图更新</div>
            <button onClick={updateForm}>{form.name}</button>

            <hr/>
            <div>受控表单绑定，表单的 value和 useState 的 value 保持一致</div>
            <input value={value} onChange={(e) => {
                setValue(e.target.value);
                console.log(e.target.value)
            }} type="text"/>

            <hr/>
            <div>获取DOM</div>
            <input ref={inputRef} type="text"/>
            <button onClick={showRef}>showRef</button>
        </div>
    );
}

export default App;
